<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" type="text/css" href="/skin/css/amazeui.min1.css" />
<link href="/skin/font/iconfont.css" rel="stylesheet" type="text/css" />
<link href="/skin/css/index.css" rel="stylesheet" type="text/css" />
<script src="/user/js/jquery.js"></script>
<script src="/skin/js/clipboard.min.js"></script>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title>订单详情-会员中心</title>
<style>
/* 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值 */
a{-webkit-tap-highlight-color:transparent;outline:none;}
body { padding-bottom: 0; }

/* 内容区域 */
.detail-content {
	padding: 0.16rem;
}

/* 信息卡片 */
.info-card {
	background: #fff;
	border-radius: 0.04rem;
	padding: 0.16rem;
	margin-bottom: 0.2rem;
	box-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.04);
}

/* 订单信息 */
.order-section {
}
.product-header {
	display: flex;
	gap: 0.12rem;
	align-items: center;
	margin-bottom: 0.24rem;
}
.product-image {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 0.08rem;
	object-fit: cover;
	flex-shrink: 0;
}
.product-name {
	font-size: 0.14rem;
	font-weight: 600;
	color: #475569;
	line-height: 1.4;
	flex: 1;
}
.product-info {
}
.order-info-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.24rem;
}
.order-info-row:last-child {
	margin-bottom: 0;
}
.order-info-label {
	font-size: 0.14rem;
	color: #94a3b8;
}
.order-info-value {
	font-size: 0.14rem;
	font-weight: 600;
	color: #31374C;
}
.order-status {
	font-weight: 600;
}
.order-status.pending {
	color: #345643;
}

/* 卡片标题 */
.card-header {
	display: flex;
	align-items: center;
	gap: 0.08rem;
	padding-bottom: 0.12rem;
}
.card-icon {
	width: 0.18rem;
	height: 0.18rem;
	color: #64748b;
}
.card-title {
	font-size: 0.16rem;
	font-weight: 600;
	color: #1e293b;
}

/* 寄送信息 */
.shipping-info {
}
.recipient-row {
	display: flex;
	align-items: center;
	gap: 0.16rem;
	margin-bottom: 0.08rem;
}
.recipient-name {
	font-size: 0.14rem;
	font-weight: 600;
	color: #1e293b;
}
.recipient-phone {
	font-size: 0.14rem;
	color: #31374C;
	font-weight: 600;
}
.shipping-address {
	font-size: 0.14rem;
	color: #B0B0B0;
	line-height: 1.6;
}

/* 物流信息 */
.logistics-info {
}
.logistics-row {
	display: flex;
	align-items: center;
	margin-bottom: 0.15rem;
}
.logistics-row:last-child {
	margin-bottom: 0;
}
.logistics-label {
	font-size: 0.13rem;
	color: #94a3b8;
	min-width: 0.8rem;
}
.logistics-value {
	font-size: 0.13rem;
	color: #1e293b;
	flex: 1;
	text-align: right;
}
.logistics-link {
	color: #253043;
	font-weight: 600;
	text-decoration: underline;
	margin-left: 0.08rem;
}
.copy-btn {
	font-size: .1rem;
    padding: 0.02rem .1rem;
	background: #e4e4e4;
    color: #345643;
    border: none;
    border-radius: 0.01rem;
    margin-right: 0.08rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.copy-btn:active {
	opacity: 0.8;
}

/* 复制提示 */
.copyCj {
	position: fixed;
	top: -9999px;
	left: -9999px;
	opacity: 0;
	z-index: -1;
}
.copyCj textarea {
	width: 1px;
	height: 1px;
	opacity: 0;
}
.copyTishi {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.8);
	color: #fff;
	padding: 0.2rem 0.3rem;
	border-radius: 0.08rem;
	text-align: center;
	z-index: 9999;
	display: none;
}
.copyTishi img {
	width: 0.5rem;
	height: 0.5rem;
	margin-bottom: 0.1rem;
}
.copyTishi p {
	font-size: 0.14rem;
	margin: 0;
}
.tishiBg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9998;
	display: none;
}
</style>
<script>
	// 设计稿 375px，1rem = 100px，换算方法：px值 ÷ 100 = rem值
	(function(){
		var docEl = document.documentElement;
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
		function recalc() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = (clientWidth / 375 * 100) + 'px';
		}
		if (!document.addEventListener) return;
		window.addEventListener(resizeEvt, recalc, false);
		document.addEventListener('DOMContentLoaded', recalc, false);
		recalc();
	})();
</script>
</head>
<body class="cart">
<header id="header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"></a></span>
		<h1 id="t0">订单详情</h1>
		<div class="u-right" href="#">
			<a href="/" class="hSearch right"><img src="/skin/img/i_home.png"></a>
		</div>
	</section>
</header>

<div class="detail-content">
	<!-- 订单信息 -->
	<div class="info-card">
		<div class="order-section">
			{$gdlist = $order['glist']}
			{for $gdlist $i}
			{if($i==0)}
			<div class="product-header">
				<img src="{$gdlist[$i][thumb]}" alt="商品图片" class="product-image" />
				<div class="product-name">{$gdlist[$i][name]}</div>
			</div>
			{/if}
			{/for}
			<div class="product-info">
				<div class="order-info-row">
					<span class="order-info-label">订单状态</span>
					<span class="order-info-value order-status pending">
						{if($order['type']==2)}
							{$osarr2[$order[state]]}
						{else}
							{$osarr1[$order[state]]}
						{/if}
						{if($order['zh']==1)}
						<font style="color:red">[已置换]</font>
						{elseif($order['gtype']>0 && $order['jhstate']>0)}
						<font style="color:red">[置换中]</font>
						{/if}
					</span>
				</div>
				<div class="order-info-row">
					<span class="order-info-label">下单时间</span>
					<span class="order-info-value">{$order[addtime]}</span>
				</div>
				<div class="order-info-row">
					<span class="order-info-label">订单金额</span>
					<span class="order-info-value" style="color:#ef4444;">¥{$order[cash]}</span>
				</div>
			</div>
		</div>
	</div>

	<!-- 寄送信息 -->
	{if($order['type']==2)}
	<div class="info-card">
		<div class="card-header">
			<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
			</svg>
			<span class="card-title">寄送信息</span>
		</div>
		<div class="shipping-info">
			<div class="recipient-row">
				<span class="recipient-name">{$order[tname]}</span>
				<span class="recipient-phone">{$order[phone]}</span>
			</div>
			<div class="shipping-address">{$order[address]}</div>
		</div>
	</div>
	{/if}

	<!-- 物流信息 -->
	{if($order['type']==2)}
	{if($order['trackname'])}
	<div class="info-card">
		<div class="card-header">
			<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path>
			</svg>
			<span class="card-title">物流信息</span>
		</div>
		<div class="logistics-info">
			<div class="logistics-row">
				<span class="logistics-label">物流公司:</span>
				<span class="logistics-value">{$order[trackname]}</span>
			</div>
			<div class="logistics-row">
				<span class="logistics-label">物流单号:</span>
				<div class="logistics-value">
					<button class="copy-btn" onclick="copyTrackingNumber('{$order[trackcode]}')">复制</button>
					<span class="">{$order[trackcode]}</span>
				</div>
			</div>
			<div class="logistics-row">
				<span class="logistics-label">查看物流:</span>
				<span class="logistics-value">
					<a href="https://m.kuaidi100.com/result.jsp?nu={$order[trackcode]}" target="_blank" class="logistics-link">点击查看</a>
				</span>
			</div>
		</div>
	</div>
	{/if}
	{else}
	<!-- 核销码信息 -->
	<div class="info-card">
		<div class="card-header">
			<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
			</svg>
			<span class="card-title">核销信息</span>
		</div>
		<div class="logistics-info">
			<div class="logistics-row">
				<span class="logistics-label">核销码:</span>
				<span class="logistics-value">{$order[hxcode]}</span>
			</div>
		</div>
	</div>
	{/if}

	<!-- 支付信息 -->
	<div class="info-card">
		<div class="card-header">
			<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
			</svg>
			<span class="card-title">支付信息</span>
		</div>
		<div class="logistics-info">
			<div class="logistics-row">
				<span class="logistics-label">支付方式:</span>
				<span class="logistics-value">{$payarr[$order[pay]]}</span>
			</div>
			{if($order['endtime'])}
			<div class="logistics-row">
				<span class="logistics-label">完成时间:</span>
				<span class="logistics-value">{$order[endtime]}</span>
			</div>
			{/if}
		</div>
	</div>

	<!-- 回寄物流信息 -->
	{if($order['gtype']>0 && $order['state']==4 && $order['cplx']==2)}
	{if($order['jhstate']>0)}
	<div class="info-card">
		<div class="card-header">
			<svg class="card-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
			</svg>
			<span class="card-title">回寄物流</span>
		</div>
		<div class="logistics-info">
			<div class="logistics-row">
				<span class="logistics-label">回寄物流:</span>
				<span class="logistics-value">
					{$order[trackname1]}({$order[trackcode1]})
					<a href="https://m.kuaidi100.com/result.jsp?nu={$order[trackcode1]}" class="logistics-link">查看物流</a>
				</span>
			</div>
			<div class="logistics-row">
				<span class="logistics-label">回寄时间:</span>
				<span class="logistics-value">{$order[jhtime]}</span>
			</div>
			{if($order['jhendtime'])}
			<div class="logistics-row">
				<span class="logistics-label">确认时间:</span>
				<span class="logistics-value">{$order[jhendtime]}</span>
			</div>
			{/if}
		</div>
	</div>
	{/if}
	{/if}
</div>

<!-- 复制功能 -->
<div class="copyCj">
	<textarea id="trackingNumber" value=""></textarea>
	<button class="btn" data-clipboard-target="#trackingNumber"></button>
</div>
<div class="copyTishi" style='display:none;'></div>
<div class="tishiBg"></div>

<script>
// 复制物流单号
function copyTrackingNumber(trackingNumber) {
	$('#trackingNumber').val(trackingNumber);
	$(".btn").click();
}

// 使用 clipboard.js 实现复制
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function() {
	$(".copyTishi").html(`<img src="/skin/img/success.png" /><p>复制成功</p>`);
	showTishi();
});
clipboard.on('error', function() {
	$(".copyTishi").html(`<img src="/skin/img/error.png" /><p>复制失败 请手动复制</p>`);
	showTishi();
});

// 显示提示
function showTishi() {
	$(".copyTishi").show();
	$(".tishiBg").show();
	setTimeout(function () {
		$(".copyTishi").hide();
		$(".tishiBg").hide();
	}, 2000);
}
</script>
</body>
</html>
